import { useState, useLayoutEffect } from 'react'
import styles from './index.module.scss'

interface ICardProperty {
  item: ItemOption
  onlyImage?: boolean
  noImage?: boolean
  width?: string
}

const SvgLoading = () => {
  return (
    <svg
      width='44'
      height='44'
      viewBox='0 0 44 44'
      xmlns='http://www.w3.org/2000/svg'
      stroke='currentColor'
    >
      <g fill='none' fillRule='evenodd' strokeWidth='2'>
        <circle cx='22' cy='22' r='1'>
          <animate
            attributeName='r'
            begin='0s'
            dur='1.8s'
            values='1; 20'
            calcMode='spline'
            keyTimes='0; 1'
            keySplines='0.165, 0.84, 0.44, 1'
            repeatCount='indefinite'
          ></animate>
          <animate
            attributeName='stroke-opacity'
            begin='0s'
            dur='1.8s'
            values='1; 0'
            calcMode='spline'
            keyTimes='0; 1'
            keySplines='0.3, 0.61, 0.355, 1'
            repeatCount='indefinite'
          ></animate>
        </circle>
        <circle cx='22' cy='22' r='1'>
          <animate
            attributeName='r'
            begin='-0.9s'
            dur='1.8s'
            values='1; 20'
            calcMode='spline'
            keyTimes='0; 1'
            keySplines='0.165, 0.84, 0.44, 1'
            repeatCount='indefinite'
          ></animate>
          <animate
            attributeName='stroke-opacity'
            begin='-0.9s'
            dur='1.8s'
            values='1; 0'
            calcMode='spline'
            keyTimes='0; 1'
            keySplines='0.3, 0.61, 0.355, 1'
            repeatCount='indefinite'
          ></animate>
        </circle>
      </g>
    </svg>
  )
}

const ImageCard: React.FC<ICardProperty> = ({
  item,
  onlyImage = false,
  noImage = false,
  width = '100%'
}) => {
  const [loaded, setLoaded] = useState(false)
  const [height, setHeight] = useState('auto')

  useLayoutEffect(() => {
    if (!noImage) {
      setHeight('100%')
      new Promise((resolve) => {
        const image = new Image()
        image.src = item.url
        if (image.complete) {
          setLoaded(true)
          resolve(true)
          return
        }
        image.onload = () => {
          setLoaded(true)
          resolve(true)
        }
        image.onerror = () => {
          setLoaded(true)
          resolve(true)
        }
      })
    }
  }, [])

  return (
    <div className={styles.card} data-id={item.id} style={{ width, height }}>
      {!onlyImage && (
        <div className={styles.body}>
          <h3>{item.title}</h3>
          <div className={styles.author}>
            <div className={styles.avatar}>
              <img src={item.avatar} alt={item.user} />
              <span>{item.user}</span>
            </div>
            <div className={styles.views}> ❤️{item.views > 999 ? '999+' : item.views} </div>
          </div>
        </div>
      )}
      {!noImage && (
        <div className={styles.cover}>
          {loaded ? <img src={item.url} alt='图片' /> : <SvgLoading />}
        </div>
      )}
    </div>
  )
}

export default ImageCard
